<template>
  <van-form
    validate-first
    @submit="submit"
    @failed="onFailed"
    scroll-to-error
    ref="form"
  >
    <header class="header">不良事件信息收集页面</header>

    <div class="desc">限住友员工填写，同时请在获知24小时内报告。</div>

    <div class="title">报告者信息</div>
    <van-field
      v-model="employeID"
      label="*员工号"
      name="employeID"
      placeholder="请输入"
      :rules="[
        {
          pattern: /^((800\d{4})|(600\d{5}))[0-3,5-9]$/,
          required: true,
          message: '请输入正确内容'
        }
      ]"
    />

    <van-field
      :value="eventTime"
      label="*获知该事件日期"
      name="eventTime"
      clickable
      readonly
      placeholder="点击选择时间"
      @click="pickerControl('eventTimeVisible', true)"
      :rules="[
        {
          required: true,
          message: '请选择事件获知日期'
        }
      ]"
    />
    <van-popup v-model="eventTimeVisible" position="bottom">
      <van-datetime-picker
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        :value="defaultDate"
        @confirm="pickerConfirm($event, 'eventTime')"
        @cancel="pickerControl('eventTimeVisible', false)"
      />
    </van-popup>

    <van-field
      v-model="reporterName"
      label="报告者(HCP)姓名"
      name="reporterName"
      placeholder="如从HCP处获知，请填写HCP信息"
    />
    <van-field name="agreeFollowUp" label="报告者(HCP)是否同意随访？">
      <template #input>
        <van-radio-group :value="agreeFollowUp" direction="horizontal">
          <van-radio @click="clickRadio('agreeFollowUp', '1')" name="1"
            >同意</van-radio
          >
          <van-radio @click="clickRadio('agreeFollowUp', '2')" name="2"
            >不同意</van-radio
          >
        </van-radio-group>
      </template>
    </van-field>

    <div class="space"></div>

    <div class="title">患者信息</div>
    <van-row>
      <van-col span="18">
        <van-field
          :disabled="unknownpatientFirstName"
          v-model="patientFirstName"
          label="患者姓氏"
          name="patientFirstName"
          placeholder="请输入"
        />
      </van-col>
      <van-col span="6">
        <van-field name="unknownpatientFirstName" label>
          <template #input>
            <van-checkbox
              @change="selectUnknown($event, 'patientFirstName')"
              class="checkbox--width120"
              v-model="unknownpatientFirstName"
              shape="square"
              >不详</van-checkbox
            >
          </template>
        </van-field>
      </van-col>
    </van-row>

    <van-field name="patientGender" label="患者性别">
      <template #input>
        <van-radio-group :value="patientGender" direction="horizontal">
          <van-radio @click="clickRadio('patientGender', '1')" name="1"
            >男</van-radio
          >
          <van-radio @click="clickRadio('patientGender', '2')" name="2"
            >女</van-radio
          >
          <van-radio @click="clickRadio('patientGender', '3')" name="3"
            >不详</van-radio
          >
        </van-radio-group>
      </template>
    </van-field>

    <van-row>
      <van-col span="18">
        <van-field
          :disabled="unknownpatientAge"
          label="患者年龄(岁)"
          name="patientAge"
          placeholder="请填写患者年龄"
          v-model="patientAge"
        />
      </van-col>
      <van-col span="6">
        <van-field name="unknownpatientAge" label>
          <template #input>
            <van-checkbox
              @change="selectUnknown($event, 'patientAge')"
              class="checkbox--width120"
              v-model="unknownpatientAge"
              shape="square"
              >不详</van-checkbox
            >
          </template>
        </van-field>
      </van-col>
    </van-row>
    <div class="space"></div>

    <div class="title">用药信息</div>
    <van-field
      name="drug"
      label="*药物名称"
      :rules="[{ required: true, message: '请输入用药信息' }]"
    >
      <template #input>
        <van-checkbox-group v-model="drug" direction="horizontal">
          <van-checkbox class="checkbox--width120" name="1" shape="square"
            >美平</van-checkbox
          >
          <van-checkbox class="checkbox--width120" name="2" shape="square"
            >阿尔马尔</van-checkbox
          >
          <van-checkbox class="checkbox--width120" name="3" shape="square"
            >希德</van-checkbox
          >
          <van-checkbox class="checkbox--width120" name="4" shape="square"
            >加斯清</van-checkbox
          >
          <van-checkbox class="checkbox--width120" name="5" shape="square"
            >洛珊</van-checkbox
          >
          <van-checkbox class="checkbox--width120" name="6" shape="square"
            >罗舒达</van-checkbox
          >
        </van-checkbox-group>
      </template>
    </van-field>

    <van-row>
      <van-col span="18">
        <van-field
          readonly
          :disabled="unknowndragStartTime"
          clickable
          label="用药开始日期"
          name="dragStartTime"
          placeholder="点击选择时间"
          :value="dragStartTime"
          @click="pickerControl('dragStartTimeVisible', !unknowndragStartTime)"
        />
        <van-popup v-model="dragStartTimeVisible" position="bottom">
          <van-datetime-picker
            type="date"
            :value="defaultDate"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="pickerConfirm($event, 'dragStartTime')"
            @cancel="pickerControl('dragStartTimeVisible', false)"
          />
        </van-popup>
      </van-col>
      <van-col span="6">
        <van-field name="unknowndragStartTime" label>
          <template #input>
            <van-checkbox
              @change="selectUnknown($event, 'dragStartTime')"
              class="checkbox--width120"
              v-model="unknowndragStartTime"
              shape="square"
              >不详</van-checkbox
            >
          </template>
        </van-field>
      </van-col>
    </van-row>

    <van-row>
      <van-col span="18">
        <van-field
          :disabled="unKnownDosage"
          v-model="Dosage"
          label="用法用量"
          name="Dosage"
          placeholder="请输入"
        />
      </van-col>
      <van-col span="6">
        <van-field name="unKnownDosage" label>
          <template #input>
            <van-checkbox
              @change="selectUnknown($event, 'Dosage')"
              class="checkbox--width120"
              v-model="unKnownDosage"
              shape="square"
              >不详</van-checkbox
            >
          </template>
        </van-field>
      </van-col>
    </van-row>

    <van-row>
      <van-col span="24">
        <van-field name="patientGender" label="给药途径">
          <template #input>
            <van-radio-group :value="way" direction="horizontal">
              <van-radio @click="clickRadio('way', '1')" name="1"
                >口服</van-radio
              >
              <van-radio @click="clickRadio('way', '2')" name="2"
                >静脉滴注</van-radio
              >
              <van-radio @click="clickRadio('way', '3')" name="3"
                >其它说明</van-radio
              >
            </van-radio-group>
          </template>
        </van-field>
      </van-col>
    </van-row>

    <transition name="van-slide-down van-fade">
      <van-row class="line-wrapper" v-show="way === '3'">
        <van-col span="24">
          <van-field
            v-model="wayDetail"
            label="其它说明"
            name="wayDetail"
            placeholder="请输入输入具体说明"
          />
        </van-col>
      </van-row>
    </transition>

    <van-row>
      <van-col span="18">
        <van-field
          :disabled="unknownreasonOfMed"
          v-model="reasonOfMed"
          label="用药原因(治疗疾病)"
          name="reasonOfMed"
          placeholder="请输入"
        />
      </van-col>
      <van-col span="6">
        <van-field name="unknownreasonOfMed" label>
          <template #input>
            <van-checkbox
              @change="selectUnknown($event, 'reasonOfMed')"
              class="checkbox--width120"
              v-model="unknownreasonOfMed"
              shape="square"
              >不详</van-checkbox
            >
          </template>
        </van-field>
      </van-col>
    </van-row>
    <div class="space"></div>

    <div class="title">不良事件</div>

    <van-field
      v-model="adverse"
      label="*不良事件名称"
      name="adverse"
      placeholder="请输入"
      :rules="[{ required: true, message: '请输入不良事件名称' }]"
    />

    <van-row>
      <van-col span="18">
        <van-field
          readonly
          clickable
          :disabled="unknownadverseStartTime"
          name="adverseStartTime"
          label="不良事件开始日期"
          placeholder="点击选择时间"
          :value="adverseStartTime"
          @click="
            pickerControl('adverseStartTimeVisible', !unknownadverseStartTime)
          "
        />
        <van-popup v-model="adverseStartTimeVisible" position="bottom">
          <van-datetime-picker
            type="date"
            :value="defaultDate"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="pickerConfirm($event, 'adverseStartTime')"
            @cancel="pickerControl('adverseStartTimeVisible', false)"
          />
        </van-popup>
      </van-col>
      <van-col span="6">
        <van-field name="unknownadverseStartTime" label>
          <template #input>
            <van-checkbox
              @change="selectUnknown($event, 'adverseStartTime')"
              class="checkbox--width120"
              v-model="unknownadverseStartTime"
              shape="square"
              >不详</van-checkbox
            >
          </template>
        </van-field>
      </van-col>
    </van-row>
    <van-field name="isAdverse" label="是否为严重不良事件">
      <template #input>
        <van-radio-group :value="isAdverse" direction="horizontal">
          <van-radio
            @click="clickRadio('isAdverse', '1')"
            name="1"
            class="checkbox--width120"
            >是</van-radio
          >
          <van-radio
            @click="clickRadio('isAdverse', '2')"
            name="2"
            class="checkbox--width120"
            >否</van-radio
          >
          <van-radio
            @click="clickRadio('isAdverse', '3')"
            name="3"
            class="checkbox--width120"
            >不详</van-radio
          >
        </van-radio-group>
      </template>
    </van-field>
    <transition name="van-slide-down van-fade">
      <van-row class="line-wrapper" v-show="showAdverseKinds">
        <van-checkbox-group v-model="adverseKinds" direction="horizontal">
          <van-col span="24">
            <van-checkbox class="text text--mute" name="1" shape="square"
              >死亡</van-checkbox
            >
          </van-col>
          <van-col span="24">
            <van-checkbox class="text text--mute" name="2" shape="square"
              >危及生命</van-checkbox
            >
          </van-col>
          <van-col span="24">
            <van-checkbox class="text text--mute" name="3" shape="square"
              >住院/住院延长</van-checkbox
            >
          </van-col>
          <van-col span="24">
            <van-checkbox class="text text--mute" name="4" shape="square"
              >永久或显著的残疾/功能丧失</van-checkbox
            >
          </van-col>
          <van-col span="24">
            <van-checkbox class="text text--mute" name="5" shape="square"
              >先天性异常/出生缺陷</van-checkbox
            >
          </van-col>
          <van-col span="24">
            <van-checkbox class="text text--mute" name="6" shape="square"
              >其他重要医学事件</van-checkbox
            >
          </van-col>
        </van-checkbox-group>
      </van-row>
    </transition>
    <div class="van-hairline--bottom"></div>
    <van-field
      name="afterAdverse"
      label="*不良事件转归"
      :rules="[{ required: true, message: '请选择不良事件转归' }]"
    >
      <template #input>
        <van-radio-group :value="afterAdverse" direction="horizontal">
          <van-radio
            @click="clickRadio('afterAdverse', '1')"
            name="1"
            class="checkbox--width120"
            >痊愈</van-radio
          >
          <van-radio
            @click="clickRadio('afterAdverse', '2')"
            name="2"
            class="checkbox--width120"
            >好转</van-radio
          >
          <van-radio
            @click="clickRadio('afterAdverse', '3')"
            name="3"
            class="checkbox--width120"
            >未好转</van-radio
          >
          <van-radio
            @click="clickRadio('afterAdverse', '4')"
            name="4"
            class="checkbox--width120"
            >不详</van-radio
          >
          <van-radio
            @click="clickRadio('afterAdverse', '5')"
            name="5"
            class="checkbox--width120"
            >愈后有后遗症</van-radio
          >
          <van-radio
            @click="clickRadio('afterAdverse', '6')"
            name="6"
            class="checkbox--width120"
            >死亡</van-radio
          >
        </van-radio-group>
      </template>
    </van-field>
    <van-field
      name="measure"
      label="*因事件对药物采取的措施"
      :rules="[{ required: true, message: '请选择因事件对药物采取的措施' }]"
    >
      <template #input>
        <van-radio-group :value="measure" direction="horizontal">
          <van-radio
            @click="clickRadio('measure', '1')"
            name="1"
            class="checkbox--width120"
            >剂量不变</van-radio
          >
          <van-radio
            @click="clickRadio('measure', '2')"
            name="2"
            class="checkbox--width120"
            >减量</van-radio
          >
          <van-radio
            @click="clickRadio('measure', '3')"
            name="3"
            class="checkbox--width120"
            >永久停药</van-radio
          >
          <van-radio
            @click="clickRadio('measure', '4')"
            name="4"
            class="checkbox--width120"
            >暂时停药</van-radio
          >
          <van-radio
            @click="clickRadio('measure', '5')"
            name="5"
            class="checkbox--width120"
            >不适用</van-radio
          >
          <van-radio
            @click="clickRadio('measure', '6')"
            name="6"
            class="checkbox--width120"
            >不详</van-radio
          >
        </van-radio-group>
      </template>
    </van-field>
    <van-field
      name="drugRelated"
      label="*与药物的相关性"
      :rules="[{ required: true, message: '请选择与药物的相关性' }]"
    >
      <template #input>
        <van-radio-group :value="drugRelated" direction="horizontal">
          <van-radio
            @click="clickRadio('drugRelated', '1')"
            name="1"
            class="checkbox--width120"
            >肯定有关</van-radio
          >
          <van-radio
            @click="clickRadio('drugRelated', '2')"
            name="2"
            class="checkbox--width120"
            >很可能有关</van-radio
          >
          <van-radio
            @click="clickRadio('drugRelated', '3')"
            name="3"
            class="checkbox--width120"
            >可能有关</van-radio
          >
          <van-radio
            @click="clickRadio('drugRelated', '4')"
            name="4"
            class="checkbox--width120"
            >可能无关</van-radio
          >
          <van-radio
            @click="clickRadio('drugRelated', '5')"
            name="5"
            class="checkbox--width120"
            >无法评价</van-radio
          >
        </van-radio-group>
      </template>
    </van-field>
    <div class="space"></div>

    <div class="title">事件描述</div>
    <van-notice-bar
      left-icon="info-o"
      text="(注：请描述事件经过、处置、其他用药信息及检查结果等)"
    />
    <van-field
      v-model="eventDesc"
      name="eventDesc"
      rows="3"
      autosize
      type="textarea"
      maxlength="500"
      show-word-limit
      placeholder="请输入事件描述"
    />

    <van-popup v-model="summaryVisible" :style="{ width: '70%' }">
      <van-cell-group title="提交预览">
        <van-cell title="员工号" :value="employeID" />
        <van-cell title="获知该事件日期" :value="eventTime" />
        <van-cell title="报告者（HCP）姓名" :value="reporterName" />
        <van-cell
          title="是否同意随访？"
          :value="agreeFollowUpLabels[agreeFollowUp]"
        />
        <van-cell title="患者姓氏" :value="patientFirstName" />
        <van-cell
          title="患者性别"
          :value="patientGenderLabels[patientGender]"
        />
        <van-cell title="患者年龄" :value="patientAge" />
        <van-cell title="药物名称" :value="drug">
          <span v-for="d in drug" :key="d">{{ drugLabels[d] }}、</span>
        </van-cell>
        <van-cell title="用药开始日期" :value="dragStartTime" />
        <van-cell title="用法用量" :value="Dosage" />
        <van-cell title="给药途径" :value="wayKindsLabels[way]" />
        <van-cell
          title="用药原因(治疗疾病)"
          :value="reasonOfMed || unknownreasonOfMed"
        >
        </van-cell>
        <van-cell v-if="way === '3'" title="其它说明" :value="wayDetail" />
        <van-cell title="不良事件名称" :value="adverse" />

        <van-cell title="不良事件开始日期" :value="adverseStartTime" />
        <van-cell
          title="是否为严重不良事件"
          :value="isAdverseLabels[isAdverse]"
        />
        <van-cell v-if="adverseKinds.length > 0" :value="adverseKinds">
          <span v-for="a in adverseKinds" :key="a">
            {{ adverseKindsLabels[a] }}
          </span>
        </van-cell>
        <van-cell
          title="不良事件转归"
          :value="afterAdverseLabels[afterAdverse]"
        >
        </van-cell>

        <van-cell
          title="因事件对药物采取的措施"
          :value="measureLabels[measure]"
        >
        </van-cell>
        <van-cell
          title="与药物的相关性"
          :value="drugRelatedLabels[drugRelated]"
        >
        </van-cell>
        <van-cell title="事件描述" :value="eventDesc" />
      </van-cell-group>

      <van-button
        type="primary"
        @click="commitData"
        :disabled="showLoading"
        style="vertical-align: bottom;"
        ><van-loading v-if="showLoading" size="24px">确认提交</van-loading
        ><span v-else>确认提交</span></van-button
      >
      <van-button type="default" @click="cancelData">取消</van-button>
    </van-popup>

    <div style="margin: 16px;">
      <van-button
        round
        block
        safe-area-inset-bottom
        type="info"
        native-type="submit"
        >提交</van-button
      >
    </div>

    <div class="right">
      相关隐私政策请查看住友制药公众号【友之言】栏目中的法律声明。
    </div>
  </van-form>
</template>

<style lang="less">
.header {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
}
.desc {
  font-size: 14px;
  margin-bottom: 20px;
  color: red;
}
.title {
  font-size: 18px;
  padding: 15px 16px;
  text-align: left;
  font-weight: bold;
  background-color: #8bc34aad;
}
.space {
  width: 100%;
  height: 15px;
}
.checkbox--width120 {
  width: 100px;
}
.van-checkbox {
  margin-bottom: 6px;
}
.line-wrapper {
  padding: 10px 16px;
  overflow: hidden;
}
.text {
  font-size: 14px;
  color: #323233;
}
.right {
  font-size: 12px;
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}
</style>

<script>
import { Dialog, Toast } from "vant";
import moment from "moment";
import axios from "axios";

const agreeFollowUpLabels = {
  1: "同意",
  2: "不同意"
};

const patientGenderLabels = {
  1: "男",
  2: "女",
  3: "不详"
};

const drugLabels = {
  1: "美平",
  2: "阿尔马尔",
  3: "希德",
  4: "加斯清",
  5: "洛珊",
  6: "罗舒达"
};

const isAdverseLabels = {
  1: "是",
  2: "否",
  3: "不详"
};

const measureLabels = {
  1: "剂量不变",
  2: "减量",
  3: "永久停药",
  4: "暂时停药",
  5: "不适用",
  6: "不详"
};

const adverseKindsLabels = {
  1: "死亡",
  2: "危及生命",
  3: "住院/住院延长",
  4: "永久或显著的残疾/功能丧失",
  5: "先天性异常/出生缺陷",
  6: "其他重要医学事件"
};

const afterAdverseLabels = {
  1: "痊愈",
  2: "好转",
  3: "未好转",
  4: "不详",
  5: "痊愈有后遗症",
  6: "死亡"
};

const drugRelatedLabels = {
  1: "肯定有关",
  2: "很可能有关",
  3: "可能有关",
  4: "可能无关",
  5: "无法评价"
};

const wayKindsLabels = {
  1: "口服",
  2: "静脉滴注",
  3: "其它说明"
};

let initialData = {
  minDate: new Date(1950, 0, 1),
  maxDate: new Date(2021, 11, 31),
  defaultDate: new Date(2020, 0, 1),
  // 数据
  employeID: "",
  eventTime: "",
  reporterName: "",
  agreeFollowUp: "",
  patientFirstName: "",
  patientGender: "",
  patientAge: "",
  drug: [],
  dragStartTime: "",
  reasonOfMed: "",
  Dosage: "",
  adverse: "",
  adverseStartTime: "",
  isAdverse: "",
  adverseKinds: [],
  afterAdverse: "",
  measure: "",
  drugRelated: "",
  eventDesc: "",
  adverseKindsLabels,
  afterAdverseLabels,
  drugRelatedLabels,
  way: "",
  wayDetail: "",

  // labels
  agreeFollowUpLabels,
  patientGenderLabels,
  drugLabels,
  measureLabels,
  isAdverseLabels,
  wayKindsLabels,

  // 提交预览开关
  summaryVisible: false,

  // picker 开关
  eventTimeVisible: false,
  patientAgeVisible: false,
  dragStartTimeVisible: false,
  adverseStartTimeVisible: false,

  // 不详选项
  unknownpatientFirstName: false,
  unknownpatientAge: false,
  unknowndragStartTime: false,
  unKnownDosage: false,
  unknownreasonOfMed: false,
  unknownadverseStartTime: false,

  // 校验
  employeIDValidator: /^((800\d{4})|(600\d{5}))[0-3,5-9]$/,

  showLoading: false
};

export default {
  data() {
    const formData = localStorage.getItem("formData");
    const data = formData && JSON.parse(formData);
    data.minDate = initialData.minDate;
    data.maxDate = initialData.maxDate;
    data.defaultDate = initialData.defaultDate;

    if (data) {
      return { ...initialData, ...data };
    }
    return initialData;
  },
  computed: {
    showAdverseKinds: function() {
      return this.isAdverse === "1";
    }
  },
  methods: {
    // 提交
    submit(values) {
      this.summaryVisible = true;

      console.log(values);
    },
    onFailed(errorInfo) {
      console.log("failed", errorInfo);
    },
    clickRadio(key, checkedNum) {
      if (this[key] === checkedNum) return (this[key] = "");
      this[key] = checkedNum;
      // console.log(e.target.spellcheck);
    },

    commitData() {
      this.showLoading = true;
      // 提交接口
      // 提交成功后，删除localStorage中的数据

      let drugsHtmlStr = "";
      let afterAdverseHtmlStr = "";
      let measureHtmlStr = "";
      let drugRelatedHtmlStr = "";
      let adverseKindsHtmlStr = "";

      for (let d of this.drug) {
        drugsHtmlStr = drugsHtmlStr + `<span>${drugLabels[d]}、</span>`;
      }

      for (let af of this.afterAdverse) {
        afterAdverseHtmlStr =
          afterAdverseHtmlStr + `<span>${afterAdverseLabels[af]}</span>`;
      }

      for (let m of this.measure) {
        measureHtmlStr = measureHtmlStr + `<span>${measureLabels[m]}</span>`;
      }

      for (let d of this.drugRelated) {
        drugRelatedHtmlStr =
          drugRelatedHtmlStr + `<span>${drugRelatedLabels[d]}</span>`;
      }

      for (let a of this.adverseKinds) {
        adverseKindsHtmlStr =
          adverseKindsHtmlStr + `<span>${adverseKindsLabels[a]}</span>`;
      }

      const htmlStr = `<h2>不良事件信息收集页面</h2>

      <p>员工号: ${this.employeID} <p/>
      <p>获知该事件日期: ${this.eventTime} <p/>
      <p>报告者（HCP）姓名: ${this.reporterName} <p/>
      <p>是否同意随访？: ${agreeFollowUpLabels[this.agreeFollowUp]} <p/>
      <p>患者姓氏: ${this.patientFirstName} <p/>
      <p>患者性别: ${patientGenderLabels[this.patientGender]} <p/>
      <p>患者年龄: ${this.patientAge} <p/>
      <p>药物名称: ${drugsHtmlStr} <p/>
      <p>用药开始日期: ${this.dragStartTime} <p/>
      <p>用法用量: ${this.Dosage} <p/>
      <p>用药途径: ${wayKindsLabels[this.way]} <p/>
      ${this.way === "3" ? "<p>其它说明: " + this.wayDetail + "<p/>" : ""}
      <p>用药原因(治疗疾病): ${this.reasonOfMed}</p>
      <p>不良事件名称: ${this.adverse} <p/>
      <p>不良事件开始日期: ${this.adverseStartTime} <p/>
      <p>是否为严重不良事件: ${isAdverseLabels[this.isAdverse]} ${
        adverseKindsHtmlStr ? "-- " + adverseKindsHtmlStr : ""
      }<p/>
      <p>不良事件转归: ${afterAdverseHtmlStr} <p/>
      <p>因事件对药物采取的措施: ${measureHtmlStr} <p/>
      <p>与药物的相关性: ${drugRelatedHtmlStr} <p/>
      <p>事件描述: ${this.eventDesc} <p/>`;

      axios
        .post("https://w2.cowsms.com/api/v1/mails", {
          emp_no: this.employeID,
          body: htmlStr
        })
        .then(() => {
          localStorage.removeItem("formData");
          Object.keys(initialData).forEach(
            key => (this[key] = initialData[key])
          );

          Dialog.alert({
            title: "提交成功",
            confirmButtonText: "关闭",
            message:
              "您提交的报告已经发送至住友制药药物警戒部邮箱我们会进行确认，如有必要将会进一步与您联系。"
          }).then(() => {
            // eslint-disable-next-line no-undef
            WeixinJSBridge && WeixinJSBridge.call("closeWindow");
          });
        })
        .catch(() => Toast("提交失败，稍后重试"))
        .finally(() => (this.showLoading = false));
    },

    cancelData(e) {
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();
      this.summaryVisible = false;
    },

    // 选择，不详选项
    selectUnknown(selected, name) {
      const key = name;
      if (selected) {
        this[key] = "不详";
      } else {
        this[key] = "";
      }
    },

    // picker 控制函数
    pickerControl(pickerName, visible) {
      this[pickerName] = visible;
    },
    pickerConfirm(value, picker) {
      this[picker] = moment(value).format("YYYY/MM/DD");
      this[`${picker}Visible`] = false;
    }
  },
  // 存储数据到本地
  created() {
    window.addEventListener("unload", () => {
      const data = JSON.stringify(this.$data);

      localStorage.setItem("formData", data);
    });
  }
};
</script>
